<template>
  <div>
    <p style="text-align: right;">
      <span v-if="error" style="float: left;color: red;">{{ error }}</span>
      <el-button type="primary" @click="addGroup">添加分组</el-button>
      <el-button type="primary" @click="addRow(null)">添加条件</el-button>
    </p>
    <el-table
      :data="filters"
      style="width: 100%"
      row-key="id"
      border
      default-expand-all
    >
      <el-table-column prop="IsAnd" label="And" width="80" align="center">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.IsAnd" />
        </template>
      </el-table-column>
      <el-table-column prop="Mode" label="筛选方式" width="150" align="center">
        <template slot-scope="scope">
          <el-select
            v-if="scope.row.isGroup == false"
            v-model="scope.row.Mode"
            style="width: 100%"
            placeholder="筛选方式"
            @change="initRow(scope.row)"
          >
            <el-option label="无" :value="null" />
            <el-option label="等于" :value="0" />
            <el-option label="大于" :value="1" />
            <el-option label="大于等于" :value="2" />
            <el-option label="小于" :value="3" />
            <el-option label="小于等于" :value="4" />
            <el-option label="两个值之间" :value="5" />
            <el-option label="模糊匹配" :value="6" />
            <el-option label="匹配前部分" :value="7" />
            <el-option label="匹配后部分" :value="8" />
            <el-option label="包含" :value="9" />
            <el-option label="不包含" :value="10" />
            <el-option label="不等于" :value="11" />
            <el-option label="不匹配" :value="12" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="ColId" label="筛选字段" min-width="200" align="center">
        <template slot-scope="scope">
          <formColChiose
            v-if="scope.row.isGroup == false"
            v-model="scope.row.ColId"
            :table-id.sync="scope.row.TableId"
            :disabled="scope.row.Mode == null"
            :show-mode="[0]"
            :form-id="formId"
            :limit-table-id="tableId"
            :func-type="scope.row.FuncType"
            :filter-data-type="scope.row.DataType"
            :cur-item.sync="scope.row.col"
            :ver="scope.row.ver"
            :is-mulite="false"
          />
        </template>
      </el-table-column>
      <el-table-column prop="content" label="值" min-width="400" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.isGroup == false" style="text-align: left;">
            <filterInput :key="scope.row.id" v-model="scope.row.Value" :row="scope.row" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="Action" label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.isGroup" type="primary" size="mini" icon="el-icon-plus" circle @click="addRow(scope.row)" />
          <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="drop(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import formColChiose from '@/customForm/components/form/formColChiose.vue'
import filterInput from '@/customForm/components/pageFilter/filterInput.vue'
export default {
  components: {
    formColChiose,
    filterInput
  },
  props: {
    formId: {
      type: Array,
      default: null
    },
    tableId: {
      type: Array,
      default: null
    },
    items: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      filters: [],
      error: null,
      rowTemplate: {
        id: null,
        gid: null,
        isGroup: false,
        ColId: null,
        Mode: null,
        Value: null,
        IsAnd: true,
        FuncType: [],
        DataType: [],
        col: null,
        TableId: null,
        ver: 0
      },
      id: 1
    }
  },
  watch: {
    items: {
      handler(val) {
        this.reset()
      },
      immediate: true
    }
  },
  mounted() { },
  methods: {
    initColumn(col, list) {
      if (col.Mode == null) {
        this.error = '请选择筛选方式!'
        return false
      } else if (col.ColId == null) {
        this.error = '请选择筛选字段!'
        return false
      }
      const row = {
        ColId: col.ColId,
        TableId: col.TableId,
        Mode: col.Mode,
        IsAnd: col.IsAnd,
        Value: col.Value
      }
      if (col.Mode === 5) {
        if (row.Value == null && row.Value.length !== 2) {
          this.error = '筛选值不能为空!'
          return false
        }
      } else if (row.Value == null || row.Value.length === 0) {
        this.error = '筛选值不能为空!'
        return false
      }
      list.push(row)
      return true
    },
    isNull(val) {
      return val == null || val === ''
    },
    getValue() {
      const data = {
        isError: false,
        rows: []
      }
      this.error = null
      for (let i = 0; i < this.filters.length; i++) {
        const item = this.filters[i]
        if (item.isGroup) {
          if (item.children.length === 0) {
            data.isError = true
            this.error = '分组不能为空!'
            return data
          }
          const group = {
            IsAnd: item.IsAnd,
            Children: []
          }
          for (let k = 0; k < item.children.length; k++) {
            if (!this.initColumn(item.children[k], group.Children)) {
              data.isError = true
              return data
            }
          }
          data.rows.push(group)
        } else if (!this.initColumn(item, data.rows)) {
          data.isError = true
          return data
        }
      }
      return data
    },
    initRow(row) {
      if (row.Mode >= 1 && row.Mode <= 5) {
        row.FuncType = [0]
        row.DataType = [2, 3, 6, 7, 8, 9]
      } else if (row.Mode >= 6 && row.Mode <= 8) {
        row.FuncType = [0]
        row.DataType = [0, 1]
      } else {
        row.FuncType = []
        row.DataType = []
      }
      row.ver = row.ver + 1
    },
    drop(row) {
      if (row.isGroup || row.gid == null) {
        this.filters = this.filters.filter(c => c.id !== row.id)
      } else {
        const group = this.filters.find(c => c.id === row.gid)
        group.children = group.children.filter(c => c.id !== row.id)
      }
    },
    addRow(group) {
      const row = Object.assign({}, this.rowTemplate)
      row.id = this.id
      this.id = this.id + 1
      if (group == null) {
        this.filters.push(row)
      } else {
        row.gid = group.id
        group.children.push(row)
      }
    },
    addGroup() {
      this.filters.push({
        id: this.id,
        isGroup: true,
        IsAnd: true,
        children: []
      })
      this.id = this.id + 1
    },
    getRow(row, gid) {
      const temp = Object.assign({}, this.rowTemplate)
      const t = Object.assign(temp, row)
      t.id = this.id
      t.gid = gid
      this.id = this.id + 1
      this.initRow(t)
      return t
    },
    reset() {
      if (this.items && this.items.length > 0) {
        this.filters = this.items.map(c => {
          if (c.Children && c.Children.length > 0) {
            const gid = this.id
            this.id = this.id + 1
            const g = {
              id: gid,
              isGroup: true,
              IsAnd: true,
              children: c.Children.map(a => this.getRow(a, gid))
            }
            return g
          } else {
            return this.getRow(c, null)
          }
        })
      }
    }
  }
}
</script>
